//颜色
:root{
    --color-red: #ea120f;
    --color-blue: #567bea;
    --color-skyBlue: #36ead9;
    --color-green: #28bd2d;
    --color-yellow: #f1cd52;
    --color-orange: #f15715;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-666: #666;
    --color-999: #999;
    --color-eee: #eee;
}
$colorName:(red,blue,skyBlue,green,fff,000,white,black,666,999,eee);
$listName:((name:c,val:color), (name:bgc,val:background-color), (name:bc,val:border-color));
@each $i in $listName{
    @each $color in $colorName{
        .#{map-get($i,name)+'-'+$color}{
            #{map-get($i,val)}:var(color-+$color);
        }
    }
}

//fle布局
.row{
    display: flex;
    flex-flow: row nowrap;
}
.column{
    display: flex;
    flex-flow: column nowrap;
}
.rowi{
    display: inline-flex;
    flex-flow: row nowrap;
}
.columni{
    display: inline-flex;
    flex-flow: column nowrap;
}
//左右布局
.jcc{
    justify-content: center;
}
.jcl{
    justify-content: flex-end;
}
.jcr{
    justify-content: flex-start;
}
.jca{
    justify-content: space-around;
}
.jcb{
    justify-content: space-between;
}
.jce{
    justify-content: space-evenly;
}
//上下布局
.aic{
    align-items: center;
}
.aie{
    align-items: flex-end;
}
.ais{
    align-items: flex-start;
}
.aib{
    align-items: baseline;
}
.aia{
    align-items: stretch;
}
//flex块
@for $i from 1 through 12{
    flex-#{$i}{
        flex: $i;
    }
}
//主轴方向
.fdr{
    flex-direction:row;
}
.fdr_{
    flex-direction:row-reverse;
}
.fdc{
    flex-direction:column;
}
.fdc_{
    flex-direction:column-reverse;
}
//是否换行
.fwn{
    flex-wrap:nowrap;;
}
.fww{
    flex-wrap:wrap;;
}
.fwr{
    flex-wrap:wrap-reverse;
}
//多轴对其方向，一条线时不起作用
.acs{
    align-content:flex-start;
}
.ace{
    align-content:flex-end;
}
.acc{
    align-content:center;
}
.acb{
    align-content:space-between;
}
.aca{
    align-content:space-around;
}
.acst{
    align-content:stretch;
}
//放大比例
@for $i from 1 through 12{
    flex-#{$i}{
        flex-grow: $i;
    }
}
//缩小比例
@for $i from 1 through 12{
    flex-#{$i}{
        flex-shrink: $i;
    }
}
//单个项目对其于其他不一样
.asc{
    align-self: center;
}
.ase{
    align-self: flex-end;
}
.ass{
    align-self: flex-start;
}
.asb{
    align-self: baseline;
}
.asst{
    align-self: stretch;
}
.asa{
    align-self: auto;
}
//字体
@for $i from 5 through 20{
    .f#{$i}{
        font-size: $i*2+px;
    }
}


